<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import TestChart from "@/views/test/components/test.vue";
import { delayCheck } from "@/api";

const data1 = ref([]);

const timer = ref(null);
const maxBarCount = ref(10); //最大显示条数

const fetchData = async () => {
  try {
    const { data } = await delayCheck();
    const newValue1 = Number(data.result["打非治违"]);

    data1.value = [...data1.value, newValue1].slice(-maxBarCount.value);
  } catch (error) {
    console.error("获取数据失败:", error);
  }
};

// 定时更新
const startInterval = () => {
  timer.value = setInterval(fetchData, 2000);
};

onMounted(() => {
  fetchData();
  startInterval();
});

onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value);
  }
});
</script>

<template>
  <div class="bar-4">
    <test-chart
      :data="data1"
      :max-value="60"
      :bar-width="30"
      width="100%"
      height="100%"
      title="打非治违"
    />
  </div>
</template>

<style scoped lang="scss">
.bar-4 {
  width: 100%;
  height: 100%;
}
</style>
